<template>
	<view class="content" :style="{ paddingTop: topHeight }">

		<u-sticky :custom-nav-height="topHeight" style="background:#fff;">
			<view class="chat">聊天</view>

			<view class="gz dis-flex flex-x-between flex-y-center">
				<view class="txts tac" @click="onTab(1)">
					<image class="icons" src="/static/imgs/xx1.png" mode="widthFix" />
					<view>通知</view>
					<view class="dot" v-if="notice_num > 0">{{ notice_num > 99 ? '...' : notice_num }}</view>
				</view>

				<view class="txts tac" @click="onTab(2)">
					<image class="icons" src="/static/imgs/xx2.png" mode="widthFix" />
					<view>新增关注</view>
					<view class="dot" v-if="collect_num > 0">{{ collect_num > 99 ? '...' : collect_num }}</view>
				</view>

				<view class="txts tac" @click="onTab(3)">
					<image class="icons" src="/static/imgs/xx3.png" mode="widthFix" />
					<view>被点赞</view>
					<view class="dot" v-if="zan_num > 0">{{ zan_num > 99 ? '...' : zan_num }}</view>
				</view>

				<view class="txts tac" @click="onTab(4)">
					<image class="icons" src="/static/imgs/xx4.png" mode="widthFix" />
					<view>评论</view>
					<view class="dot" v-if="eveluate_num > 0">{{ eveluate_num > 99 ? '...' : eveluate_num }}</view>
				</view>
			</view>
		</u-sticky>

		<view class="imBox">
			<ListPage @scrolltolower="scrolltolower" :loadMoreStatus="empty">
				<u-swipe-action>
					<u-swipe-action-item v-for="(item, index) in list" :options="options" :key="index" :index="index"
						:threshold="thresholdLen" @click="onDeleteChat(item, index)">
						<view class="dis-flex flex-y-center" @click="tosend(item)">
							<image v-if="item.user_id.avatar" class="avatar" :src="IMG_URL + item.user_id.avatar"
								mode="widthFix" />
							<image v-else src="/static/imgs/tou.png" class="avatar" mode="widthFix" />
							<view class="flex-box messages">
								<view class="name">{{ item.user_id.username }}</view>
								<view class="message" v-if="item.last_message">
									<text v-if="item.last_message.message_type == 'video'">[视频]</text>
									<text v-else style="width: 150px;overflow: hidden;">{{ item.last_message.content
										}}</text>
								</view>
							</view>
							<view class="time" v-if="item.last_message">{{ item.last_message.createtime | handleData }}
							</view>
							<view class="time" v-else>{{ item.createtime }}</view>

							<!-- 未读消息数量 页面没有 字段是  item.unread -->
						</view>

					</u-swipe-action-item>
				</u-swipe-action>
			</ListPage>

			<u-loading-page :loading="loading"></u-loading-page>
		</view>

		<Tabbar path="/pages/im/index"></Tabbar>
	</view>
</template>

<script>
import ListPage from "@/components/listPage/index.vue";
import {
	getChatList,
	deleteChat,
	getUnreadNum
} from "../../api/im.js";
import {
	delList
} from '@/api/chat.js';
import st from "../../utlis/showtoast.js";
import {
	IMG_URL,
} from "../../config/app.js";

export default {
	components: {
		ListPage
	},
	data() {
		return {
			IMG_URL: IMG_URL,
			notice_num: 0,
			collect_num: 0,
			zan_num: 0,
			eveluate_num: 0,

			loading: false,
			list: [],
			thresholdLen: 30,
			options: [{
				text: '删除',
				style: {
					padding: '0 25px',
					marginLeft: '10px'
				}
			},],
		}
	},
	onShow() {
		this.getData()
		uni.hideTabBar()
		this.getUnreadNumData()
	},
	mounted() {
		// this.getData()
		
	},
	computed: {
		// isLoading() {
		// 	return this.loading === false && this.list.length != 0
		// },
		empty() {
			return this.list.length === 0 && this.loading === false
		}
	},
	methods: {
		//前往聊天
		tosend(data) {
			console.log(data, '传过去数据');
			uni.navigateTo({
				url: '/pages/im/chat?data=' + JSON.stringify(data)
			})
		},
		toJump(url) {
			if (!url) return
			uni.navigateTo({
				url
			});
		},
		itemDel(e) {
			console.log(e)
		},
		scrolltolower() {
			console.log('触底加载')
		},
		/**
		 * 通知跳转
		 */
		onTab(index) {
			console.log(index);
			switch (parseInt(index)) {
				case 1: //通知
					uni.navigateTo({
						url: "/pages/im/notice"
					})
					break;
				case 2: //新增关注
					uni.navigateTo({
						url: "/pages/im/addFollow"
					})
					break;
				case 3: //收到的赞
					uni.navigateTo({
						url: "/pages/im/getLikes"
					})
					break;
				case 4: //评论
					uni.navigateTo({
						url: "/pages/im/comment"
					})
					break;
			}
		},







		/**
		 * 删除聊天会话
		 */
		async onDeleteChat(item, index) {
			console.log('删除聊天会话', item.conversation_id, index);
			await delList({
				'conversation_id': item.conversation_id,
			}).then(res => {
				uni.showToast({
					'title': res.msg,
					'icon': 'none',
					'duration': 1000
				})
				this.list.splice(index, 1);
			})

		},
		/**
		 * 网络请求
		 */
		async getData() {
			let res = await getChatList()
			this.list = res.data
			console.log(this.list);
		},
		/**
		 * 获取未读数量
		 */
		async getUnreadNumData() {
			let res = await getUnreadNum()
			console.log(res, '获取未读');
			this.notice_num = parseInt(res.data.notice_read);
			this.collect_num = parseInt(res.data.new_read);
			this.zan_num = parseInt(res.data.like_read);
			this.eveluate_num = parseInt(res.data.remark_read);
		},
	},
	filters: {
		// 时间
		handleData(time) {
			let date = parseInt(new Date().getTime() / 1000) - parseInt(time)
			let second = parseInt(date % 60);
			let min = parseInt(parseInt(date / 60) % 60);
			let hour = parseInt(parseInt(date / 3600) % 24);
			let day = parseInt(parseInt(date / 3600 / 24) % 30);

			if (date > 30 * 24 * 3600) {
				let dateObj = new Date(parseInt(time) * 1000);
				let year = dateObj.getFullYear();
				let month = (dateObj.getMonth() + 1).toString().padStart(2, '0');
				let day2 = dateObj.getDate().toString().padStart(2, '0');
				return year + "/" + month + "/" + day2
			} else if (date > 24 * 3600) {
				return day + "天前"
			} else if (date > 3600) {
				return hour + "小时前"
			} else if (date > 60) {
				return min + "分前"
			} else {
				return second + "秒前"
			}
		}
	}
}
</script>

<style lang="scss" scoped>
/deep/.u-list {
	height: 0;
}

.content {
	padding: 0rpx 30rpx;
	height: 100%;

	.chat {
		font-weight: bold;
		font-size: 48rpx;
		color: $uni-text-color;
		padding-left: 10rpx;
	}

	.gz {
		margin-top: 40rpx;

		.txts {
			font-size: 26rpx;
			color: $uni-text-color;
			width: 25%;
			position: relative;

			.dot {
				position: absolute;
				top: -8rpx;
				right: 30rpx;
				width: 24rpx;
				height: 24rpx;
				line-height: 24rpx;
				text-align: center;
				color: white;
				font-size: 18rpx;
				border-radius: 50%;
				background: #f00;
			}
		}

		.icons {
			width: 89rpx;
			margin-bottom: 14rpx;
		}
	}

	.imBox {
		margin-top: 90rpx;
		height: 100%;

		.avatar {
			width: 90rpx;
			border-radius: 50%;
		}

		.messages {
			padding: 30rpx;

			.name {
				font-weight: bold;
				font-size: 32rpx;
				color: #252525;
			}

			.message {
				font-weight: 500;
				font-size: 26rpx;
				color: #888888;
				margin-top: 20rpx;
			}
		}

		.time {
			font-size: 22rpx;
			color: #999999;
		}
	}
}
</style>